<template>
  <div class="box">
    <div id="tableBox">
      <el-button v-has @click="(Visible = true), (strMessage = '空值转换')">空值转换</el-button>
      <el-button v-has @click="(Visible = true), (strMessage = '字符替换')">字符替换</el-button>
      <el-button v-has @click="eliminate">数据剔除</el-button>
      <el-button v-has @click="mergeList">数据合并</el-button>
      <el-button v-has @click="open">表拆分</el-button>
    </div>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange"
      border fit stripe highlight-current-row>
      <el-table-column type="selection"></el-table-column>
      <el-table-column v-for="item in tableHead" :key="item.id" :label="item.label" :prop="item.title" align="center" />
    </el-table>
    <div class="current-box">
      <el-pagination :current-page="currentPage" :page-sizes="[10, 30, 50, 100]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
    <el-dialog title="字符替换" :close-on-click-modal="false" :visible.sync="Visible" width="20%">
      <el-input v-model="str" placeholder="请输入你要转换的字符串" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="Visible = false">取 消</el-button>
        <el-button type="primary" @click="openFullScreen2('目标')">确 定</el-button>
      </span>
    </el-dialog>
    <el-table :data="tableData2" border fit stripe highlight-current-row v-if="tableData2.length">
      <el-table-column v-for="item in tableHead" :key="item.id" :label="item.label" :prop="item.title" align="center" />
    </el-table>
  </div>
</template>

<script>
  export default {
    created() {
      this.fullDraw();
      this.copyList();
    },
    data() {
      return {
        tableHead: [{
            id: 1,
            label: "姓名",
            title: "name",
          },
          {
            id: 2,
            label: "年龄",
            title: "age",
          },
          {
            id: 3,
            label: "性别",
            title: "sex",
          },
          {
            id: 4,
            label: "联系方式",
            title: "phone",
          },
        ],
        tableData: [],
        tableData2: [],
        Visible: false,
        str: "",
        strMessage: "",
        currentPage: 1, // 当前页数
        totalCount: 100, // 数据总量
        pageSize: 10,
        multipleSelection: [],
        deleteObj: ''
      };
    },
    methods: {
      fullDraw() {
        this.$server
          .getDcList({
            page: this.currentPage,
            limit: this.pageSize
          })
          .then((res) => {
            this.tableData = res.page.list;
            this.totalCount = res.page.totalCount;
          });
      },
      openFullScreen2(title) {
        if (!this.str) {
          this.$message({
            type: "error",
            message: "请输入替换成的字符",
          });
          return;
        }
        const loading = this.$loading({
          lock: true,
          text: this.strMessage + "中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        setTimeout(() => {
          loading.close();
          this.$message({
            type: "success",
            message: this.strMessage + "成功",
          });
          this.changeConversion();
          this.fullDraw();
        }, 2000);
      },
      changeConversion() {
        this.$server.changeConversion(this.str).then((res) => {
          console.log(res);
          this.str = "";
          this.Visible = false;
        });
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.fullDraw();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.fullDraw();
      },
      copyList() {
        this.$server.copyList({}).then((res) => {
          console.log(res);
          this.tableData2 = res.body;
        });
      },
      mergeList() {
        if (!this.tableData2.length) {
          this.$message({
            type: "error",
            message: "没有待合并的数据",
          });
          return;
        }
        this.$server.mergeList({}).then((res) => {
          console.log(res);
          if (res.code == "200") {
            const loading = this.$loading({
              lock: true,
              text: "数据合并中",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
            setTimeout(() => {
              loading.close();
              this.$message({
                type: "success",
                message: "数据合并成功",
              });
              this.fullDraw();
              this.copyList();
            }, 2000);
          }
        });
      },
      handleSelectionChange(val) {
        let newArr = []
        this.multipleSelection = val;
        console.log(this.multipleSelection)
        this.multipleSelection.forEach((elem, index) => {
          newArr.push(elem.id)
        })
        newArr = newArr.join(',')
        console.log(newArr)
        this.deleteObj = newArr
      },
      eliminate() {
        this.$server.eliminate(this.deleteObj).then((res) => {
          this.currentPage = 1
          this.fullDraw()
        })
      },
      open() {
        this.$alert('数据表已拆分', '表路由', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `数据表拆分成功`
            });
          }
        });
      }
    },
  };
</script>

<style lang="scss" scoped>
  .box {
    padding: 20px;
  }

  #tableBox {
    margin-bottom: 20px;
  }

  .current-box {
    width: 100%;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
  }
</style>
